
<template>
  <div class="body">
    <div class="top">
      <el-form size="mini" :inline="true">
        <el-form-item label="工单编号：">
          <el-input v-model="data.taskCode" placeholder="请输入" style="width:180px" />
        </el-form-item>
        <el-form-item label="工单状态：">
          <template>
            <el-select v-model="data.status" style="width:180px" size="mini" placeholder="请选择">
              <el-option
                v-for="item in statuslist"
                :key="item.statusid"
                :label="item.statusname"
                :value="item.statusid"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="chaxun">
            <i class="el-icon-search" />
            查询</el-button>
        </el-form-item>
      </el-form>
      <svg class="sousuo" />
    </div>
    <div class="list">
      <el-button size="mini" type="warning" @click="reestablishment('新建工单')"> <i class="el-icon-circle-plus-outline" /> 新建</el-button>
      <el-table :data="list">
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span>{{ (data.pageIndex-1)*data.pageSize+scope.$index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单编号">
          <template v-slot="{ row }">
            <span>{{ row.taskCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备编号">
          <template v-slot="{ row }">
            <span>{{ row.innerCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单类型">
          <template v-slot="{ row }">
            <span>{{ row?.taskType?.typeName }}</span>
          </template>

        </el-table-column>
        <el-table-column label="工单方式">
          <template v-slot="{ row }">
            <span>{{ (row.createType===0)? '自动' : (row.createType===1) ? '手动':'无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单状态">
          <template v-slot="{ row }">
            <span>{{ row.taskStatusTypeEntity.statusName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运营人员">
          <template v-slot="{ row }">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期">
          <template v-slot="{ row }">
            <span>{{ $dayjs(row.createTime).format('YYYY.MM.DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="particulars(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" style="height:60px" align="middle" justify="space-between">
        <span class="record">共{{ totalCount }}条记录 第{{ data.pageIndex }}/ {{ totalPage }} 页</span>
        <el-pagination
          :page-size="data.pagesize"
          :current-page="data.pageIndex"
          layout="prev,  next"
          :total="+totalCount"
          prev-text="上一页"
          next-text="下一页"

          @current-change="changePage"
        />
      </el-row>
    </div>
    <!-- 新增工单 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label-width="120px" label="设备编号：">
          <el-input v-model="formList.innerCode" placeholder="请输入" style="width:380px" size="mini" />
        </el-form-item>
        <el-form-item label-width="120px" label="工单类型：">
          <template>
            <el-select v-model="formList.productType" style="width:380px" size="mini" placeholder="请选择">
              <el-option
                v-for="item in arrTypeList"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.type"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label-width="120px" label="补货数量：">
          <el-button type="text" @click="buhuoqingdan"> <i class="el-icon-document" /> 补货清单</el-button>
        </el-form-item>
        <el-form-item label-width="120px" label="运营人员：">
          <template>
            <el-select v-model="formList.userId" style="width:380px" size="mini" placeholder="请选择">
              <el-option
                v-for="item in renyuanList"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label-width="120px" label="备注：">
          <el-input v-model="formList.desc" placeholder="请输入备注(不超过40字)" :rows="4" style="width:380px;" type="textarea" size="mini" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="warning" @click="setTypeLists">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 工单详情 -->
    <el-dialog
      title="工单详情"
      :visible.sync="WorkOrderDetails"
      width="45%"
      :before-close="handleClose"
    >
      <div v-if="statusId === 1" class="rowTop">
        <div class="topImg">
          <img src="~@/assets/dbmin.png" alt="">
          <span>{{ statusName }}</span>
        </div>
        <img class="footImg" src="~@/assets/dbmax.png" alt="">
      </div>
      <div v-if="statusId === 3" class="rowTop">
        <div class="topImg">
          <img src="~@/assets/qxmin.png" alt="">
          <span>{{ statusName }}</span>
        </div>
        <img class="footImg" src="~@/assets/qxmax.png" alt="">
      </div>
      <div v-if="statusId === 4" class="rowTop">
        <div class="topImg">
          <img src="~@/assets/wcmin.png" alt="">
          <span>{{ statusName }}</span>
        </div>
        <img class="footImg" src="~@/assets/wcmax.png" alt="">
      </div>
      <el-row class="rowFooter">
        <el-col :span="12"><div class="grid-content bg-purple" />设备编号：{{ particularsList.innerCode }} </el-col>
        <el-col :span="12"><div class="grid-content bg-purple" />创建日期：{{ $dayjs(particularsList.createTime ).format('YYYY.MM.DD HH:mm:ss') }}</el-col>
        <el-col v-if="statusId!==1" :span="12"><div class="grid-content bg-purple" />完成日期：{{ $dayjs(particularsList.updateTime ).format('YYYY.MM.DD HH:mm:ss') }}</el-col>
        <el-col :span="12"><div class="grid-content bg-purple" />运营人员：{{ particularsList.userName }}</el-col>
        <el-col :span="12"><div class="grid-content bg-purple" />工单类型：{{ taskType?.typeName }}</el-col>
        <el-col :span="12"><div class="grid-content bg-purple" />工单方式：{{ yingshebiao[particularsList.createType] }}</el-col>
        <el-col v-if="statusId !==3" :span="12"><div class="grid-content bg-purple" /> &emsp; &ensp; 备注：{{ particularsList.desc }}</el-col>
        <el-col v-else :span="12"><div class="grid-content bg-purple" /> 取消原因：{{ particularsList.desc }}</el-col>
        <el-col v-if="statusId===3" class="quxiaogongdan" :span="24"><el-button @click="reestablishment('重建工单')">重新创建</el-button></el-col>
        <el-col v-if="statusId===1" class="quxiaogongdan" :span="24">
          <template>
            <el-popconfirm
              title="取消工单后，将不能恢复，是否确认取消？"
              @onConfirm="quxiao"
            >
              <el-button slot="reference" class="qxbutton">取消工单</el-button>
            </el-popconfirm>
          </template>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 补货详情 -->
    <el-dialog
      title="补货详情"
      :visible.sync="replenishmentShow"
      width="45%"
      :before-close="handleClose"
    >
      <el-table :data="replenishmentList">
        <el-table-column label="货道编号">
          <template v-slot="{ row }">
            <span>{{ row.channelCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品">
          <template v-slot="{ row }">
            <span>{{ row.skuName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="补货数量">
          <template v-slot="{ row }">
            <span>{{ row.expectCapacity }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 补货详情清单 -->
    <el-dialog
      title="补货详情"
      :visible.sync="inventory"
      width="45%"
      :before-close="handleClosesss"
    >
      <el-table :data="replenishmentList">
        <el-table-column label="货道编号">
          <template v-slot="{ row }">
            <span>{{ row.channelCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品">
          <template v-slot="{ row }">
            <span>{{ row.skuName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="补货数量">
          <template v-slot="{ row }">
            <span>{{ row.expectCapacity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="还可添加">
          <template v-slot="{ row }">
            <span>{{ 10 - row.expectCapacity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="补满数量">
          <template v-slot="{ row }">
            <el-input-number :v-model="10-row.expectCapacity" style="width:100px" controls-position="right" :min="0" :max="10" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { cancelWorkOrder, gettaskId, getTypeList, ReplenishmentDetails, setTypeList, workOrder } from '@/api/employee'
import { getrenyuan } from '@/api/role'
export default {
  name: 'YunWeigongdan',
  data() {
    return {
      num: 1,
      inventory: false,
      configuration: false,
      replenishmentShow: false,
      WorkOrderDetails: false,
      // 新增/修改 title名
      title: '',
      // 工单方式
      taskType: [],
      // 状态id
      statusId: null,
      // 状态名
      statusName: '',
      // 补货列表
      replenishmentList: [],
      // 工单列表
      list: [],
      // 工单类型列表
      arrTypeList: [],
      // 人员列表
      renyuanList: [],
      // 详情图片映射表
      // minImg: {
      //   1: '~@/assets/dbmin.png',
      //   2: '',
      //   3: '~@/assets/qxmin.png',
      //   4: '~@/assets/wcmin.png'
      // },
      // maxImg: {
      //   1: '~@/assets/dbmax.png',
      //   2: '',
      //   3: '~@/assets/qxmax.png',
      //   4: '~@/assets/wcmax.png'
      // },

      // 映射表
      yingshebiao: {
        0: '自动',
        1: '手动'
      },
      statuslist: [
        { statusid: 1, statusname: '待办中' },
        { statusid: 2, statusname: '进行中' },
        { statusid: 3, statusname: '已取消' },
        { statusid: 4, statusname: '已完成' }
      ],
      // 详情列表
      particularsList: [],
      formList: {
        createType: '',
        innerCode: '',
        userId: '',
        productType: '',
        desc: '',
        details: {}
      },
      data: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: true,
        taskCode: '',
        status: null
      },
      totalCount: 0,
      totalPage: 0,
      dialogVisible: false,
      value: ''
    }
  },
  // updated() {
  //   console.log(this.formList)
  // },
  async created() {
    this.getRole()
    this.getren()
    this.TypeList()
  },
  methods: {
    async TypeList() {
      const res = await getTypeList()
      this.arrTypeList = res
      console.log(res)
    },
    // 获取人员列表
    async getren() {
      const res = await getrenyuan(this.data)
      this.renyuanList = res.currentPageRecords
    },
    // 渲染页面
    async getRole() {
      const res = await workOrder(this.data)
      this.list = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      // console.log(res)
    },
    // 查询
    chaxun() {
      this.getRole()
    },
    // 分页更新
    changePage(newPage) {
      // console.log(newPage)
      this.data.pageIndex = newPage
      // console.log(this.data)
      this.getRole()
    },
    handleClosesss() {
      this.inventory = false
    },
    // 关闭弹窗
    handleClose() {
      this.formList.createType = ''
      this.formList.innerCode = ''
      this.formList.userId = ''
      this.formList.productType = ''
      this.formList.desc = ''
      this.formList.details = {}
      this.WorkOrderDetails = false
      this.dialogVisible = false
      this.replenishmentShow = false
    },
    // 补货清单页
    async buhuoqingdan() {
      this.inventory = true
    },
    // 查看详情
    async particulars(row) {
      const res = await gettaskId(row.taskId)
      this.taskType = res.taskType
      this.statusId = res.taskStatusTypeEntity.statusId
      this.statusName = res.taskStatusTypeEntity.statusName
      this.particularsList = res
      this.WorkOrderDetails = true
      // console.log(this.particularsList)
    },
    // 取消
    async quxiao() {
      await cancelWorkOrder({ taskId: this.particularsList.taskId, desc: '你妈的' })
      this.$message.success('取消成功')
      this.WorkOrderDetails = false
      this.getRole()
    },
    async reestablishment(title) {
      this.title = title
      if (title === '重建工单') {
        this.formList.innerCode = this.particularsList.innerCode
        this.formList.productType = this.particularsList.productTypeId
        this.formList.userId = this.particularsList.userId
        this.formList.desc = this.particularsList.desc
        const res = await ReplenishmentDetails(this.particularsList.taskId)
        this.replenishmentList = res
        this.formList.details = res
        console.log(this.formList)
      } else {
        this.formList.createType = 1
      }

      this.dialogVisible = true
      this.WorkOrderDetails = false
    },
    async setTypeLists() {
      console.log(this.formList)
      const res = await setTypeList(this.formList)
      console.log(res)
    }
  }

}
</script>

<style lang='scss' scoped>
.body{
  .top{
    height: 60px;
    margin: 20px;
    padding: 18px;
    background-color: #fff;
  }
  .list{
    padding: 18px;
    margin: 20px;
    background-color: #fff;
   }
}
      .quxiaogongdan{
        margin-top: 30px;
       width: 100%;
       display: flex;
       justify-content: center;
       .qxbutton{
        transform:translateX(-50%);
       }

     }
    ::v-deep.el-pagination .btn-next{
  background-color: #d5ddf8 !important;
  width: 70px;
  height: 30px;
  text-align: center;
  border-radius: 3px;
   margin: 10px;
}

::v-deep.el-pagination .btn-prev{
  background-color: #d5ddf8 !important;
  width: 70px;
  height: 30px;
  text-align: center;
  border-radius: 3px;
  margin: 10px;
}
.record{
  color: #dbdfe5;
}
.rowFooter{
  padding-left: 40px;
}
.grid-content{
  padding: 8px;
}
::v-deep.WorkOrderDetailsBtn{
  padding: 0;
  margin: 0;
}
.rowTop{
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    margin-bottom: 25px;
    background-color: hsla(0,0%,92.5%,.39);
  .topImg{
    display: flex;
    align-items: center;
    height: 54px;
    background-color: hsla(0,0%,92.5%,.39);
    img{
      padding:0 25px ;
    }
  }
  .footImg{
      margin-right: 76px;
    margin-bottom: 7px;
  }
}
</style>
